<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>JSON美化</title>
     <!--不管你要引入什么主题配色都需要引入的css文件-->
    <link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
    <!--下面的css文件就是不同主题配色的css文件-->
    <link rel="stylesheet" href="node_modules/codemirror/theme/monokai.css">
    <!--不管你需要引入什么样式和主题都是必须引入的-->
　  <script src="node_modules/codemirror/lib/codemirror.js"></script>
　  <!--使用的是javascript样式的编辑器-->
    <script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
  </head>
  <body>
    <button onclick="jsonClick()">JSON美化</button>
    <textarea id = 'code' name="code"></textarea>
  </body>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,//是否显示每一行的行数
　　　　　　 readOnly: false,//只读
            styleActiveLine: true,
            matchBrackets: true
        });
    function jsonClick() {
      try {
        debugger
        var ugly = editor.getValue()
        var obj = JSON.parse(ugly)
        var pretty = JSON.stringify(obj, undefined, 4)
        editor.setValue(pretty)
      } catch (error) {
        window.alert('格式化失败')
      }
    }
  </script>
  <style>
    html,body{
      height: 100%;
      margin: 0;
    }
    button{
      width: 100%;
      top: 0;
      left: 0;
      position:absolute;
      height: 5%;
      margin: 0;
      border: 0;
      padding: 0;
    }
    .CodeMirror {
      position:absolute;
      left: 0;
      top: 5%;
      margin: 0;
      border: 0;
      padding: 0;
      width: 100%;
      height: 95%;
    }
  </style>
</html>
